<!--河南星辰软件科技有限公司
@copyright Copyright (c) 2010~2022 All rights reserved.
-->
<template>
  <div class='app-container'>
    <el-form ref="form" :model="aa" :rules="rules" label-width="100px" id="mvcfm">
      <div>
      </div>
      <el-row>
        <el-col :span="6">
          <div class="info-box">
            <span class="info-box-icon bg-aqua"><i class="fa fa-cog"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">商品入库数量</span>
              <span class="info-box-number">{{s_count.cnt1}}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-box">
            <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">上传产品数</span>
              <span class="info-box-number">{{s_count.cnt2}}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-box">
            <span class="info-box-icon bg-green"><i class="fa fa-internet-explorer"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">一个月内销售量</span>
              <span class="info-box-number">{{s_count.cnt3}}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-box">
            <span class="info-box-icon bg-yellow"><i class="fa fa-users"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">物流发包数量</span>
              <span class="info-box-number">{{s_count.cnt4}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="form-unit">
        <span class="mvc-title-left"> 星辰工业互联网平台信息 </span>
      </div>
      <el-form label-width="200px">
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="SpringCloud Alibaba" prop=""> 版本2021.1 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册中心nacos" prop=""> 版本2.0.3 </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="流量控制Sentinel" prop=""> 版本1.8.0 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作流引擎Activiti" prop=""> 版本7.x </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div>
        <el-row>
          <el-col :span="24">
            <div style="display: flex;align-items: center;justify-content: center;">
              <div id="s_index_chart" style="width:100%;height: 500px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="form-unit">
        <span class="mvc-title-left"> 完成目标 </span>
      </div>
      <div>
        <el-row>
          <el-col :span="12">
            <div style="display: flex;align-items: center;justify-content: center;">
              <div id="s_chart3_chart" style="width:100%;height: 500px;"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="progress-group">
              <span class="progress-text">产品生产完成率</span>
              <span class="progress-number"><b>160</b>/200</span>
              <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
            </div>
            <div class="progress-group">
              <span class="progress-text">完成购买率</span>
              <span class="progress-number"><b>310</b>/400</span>
              <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
            </div>
            <div class="progress-group">
              <span class="progress-text">产品访问量</span>
              <span class="progress-number"><b>480</b>/800</span>
              <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
            </div>
            <div class="progress-group">
              <span class="progress-text">查询访问量</span>
              <span class="progress-number"><b>250</b>/500</span>
              <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="form-unit">
        <span class="mvc-title-left"> 营收总计 </span>
      </div>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总营收" prop="">
              <div class="infobox infobox-green">
                <div class="infobox-data">
                  <span class="infobox-data-number">￥10,390.90</span>
                </div>
                <div class="stat stat-success">+32%</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总利润" prop="">
              <div class="infobox infobox-green">
                <div class="infobox-data">
                  <span class="infobox-data-number">￥10,390.90</span>
                </div>
                <div class="stat stat-success">+17%</div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总成本" prop="">
              <div class="infobox infobox-pink">
                <div class="infobox-data">
                  <span class="infobox-data-number">￥24,813.53</span>
                </div>
                <div class="stat stat-important">-17%</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标完成" prop="">
              <div class="infobox infobox-green">
                <div class="infobox-data">
                  <span class="infobox-data-number">￥67,436.29</span>
                </div>
                <div class="stat stat-success">+32%</div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>
<script>
  import request from '@/utils/request'
  export default {
    name: 'CommonDesk',
    components: {},
    props: ['popparams'],
    data() {
      return {
        vueparams: this.getVUEParams(""),
        s_count: {
          cnt1: null,
          cnt2: null,
          cnt3: null,
          cnt4: null
        },
        aa: {},
        s_index: [],
        s_chart3: [],
        loading: false,
        rules: {}
      }
    },
    created() {
      this.getData();
    },
    updated() {},
    mounted() {},
    methods: {
      getData() {
        request({
          method: 'get',
          url: '/xcapi/VUEAction/oa/autooffice/CommonDesk/commonDesk?' + this.vueparams,
        }).then(data => {
          for (var k in data) {
            if (Array.isArray(data[k])) {
              this[k] = data[k];
            } else {
              $.extend(this[k], data[k]);
            }
          }
          this.initChart();
        })
      },
      initChart() {
        var s_index_config = {
          title: {
            text: "2021年度报告"
          },
          legend: {
            data: getDataSet(this.s_index, "clmn")
          },
          tooltip: {
            trigger: 'axis', //鼠标覆盖出现辅助标线
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack', 'tiled']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          grid: { //防止标签溢出
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: getDataSet(this.s_index, "series"),
            axisLabel: { //轴值倾斜展示
              interval: 0,
              rotate: 40
            },
          },
          yAxis: {
            type: 'value',
          },
          series: function(app) {
            var clmns = getDataSet(app.s_index, "clmn");
            for (var i in clmns) {
              clmns[i] = {
                name: clmns[i],
                type: "line",
                itemStyle: {
                  normal: {
                    label: {
                      show: true
                    }
                  }
                },
                data: getChartValue(app.s_index, clmns[i], "clmn", "series", "value"),
                fill: false,
              }
            }
            return clmns;
          }(this),
        };
        var myChart = this.initchart(document.getElementById('s_index_chart'));
        myChart.setOption(s_index_config);
        var s_chart3_config = {
          legend: {
            data: getDataSet(this.s_chart3, "series")
          },
          tooltip: {},
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack', 'tiled']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          series: [{
            type: "pie",
            data: getDataSeries(this.s_chart3),
            center: ["50%", "60%"], //圆心坐标
            radius: "55%" //远的半径
          }],
        };
        var myChart = this.initchart(document.getElementById('s_chart3_chart'));
        myChart.setOption(s_chart3_config);
      },
    },
  }
</script>
<style lang="scss" scoped>
  .bg-green,.bg-aqua,.bg-red,.bg-yellow{
    color: #fff !important;
  }
  .info-box {
      display: block;
      min-height: 90px;
      width: 100%;
      /*box-shadow: 0 1px 1px rgba(0,0,0,0.1);*/
      border-radius: 2px;
      margin-bottom: 15px;
  	cursor: pointer;
  }
  
  .info-box small {
      font-size: 14px
  }
  
  
  .info-box-icon {
      border-top-left-radius: 2px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 2px;
      display: block;
      float: left;
      height: 90px;
      width: 90px;
      text-align: center;
      font-size: 45px;
      line-height: 90px;
      background: rgba(0,0,0,0.2)
  }
  
  .info-box-icon>img {
      max-width: 100%
  }
  
  .info-box-content {
      padding: 5px 10px;
      margin-left: 90px
  }
  
  .info-box-number {
      display: block;
      font-weight: bold;
      font-size: 18px
  }
  
  .progress-description,.info-box-text {
      display: block;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
  }
  
  .info-box-text {
      text-transform: uppercase
  }
  
  .info-box-more {
      display: block
  }	
  .bg-green {
    background-color: #00a65a !important;
  }
  .bg-aqua {
    background-color: #00c0ef !important;
  }
  .progress-group .progress-text {
    font-weight: 600
  }
  
  .progress-group .progress-number {
    float: right
  }
  .bg-red{
    background-color: #dd4b39 !important;
  }
  .bg-yellow{
    background-color: #f39c12 !important;
  }
</style>
